<!--  -->
<template>
  <div>
    <div class="ImgDetail">
      <h5>{{imginfo.title}}</h5>
      <p v-if="imginfo.add_time">
        发表时间：{{imginfo.add_time.slice(0, 10)}}
        <span>点击次数：{{imginfo.click}}</span>
      </p>
    </div>
    <!-- 展示图片 -->
    <ul class="img">
      <li v-for="(img,index) in imgslt" :key="index">
        <img :src="img.src" alt @click="getImg(img,index)">
      </li>
    </ul>
    <!-- 图片描述 -->
    <div v-html="imginfo.content" class="content"></div>
    <!-- 评论组件 -->
    <comment :id="$route.params.id"></comment>
  </div>
</template>

<script>
import comment from "../Comment.vue";
import { ImagePreview } from "vant";

export default {
  data() {
    return {
      imginfo: {},
      imgslt: [],
      previewimg: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getInfolist();
    this.getimglist();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    // 获取图片详情信息
    async getInfolist() {
      const { data: res } = await this.$http.get(
        `/api/getimageInfo/${this.ImgID}`
      );
      this.imginfo = res.message[0];
    },
    // 获取图片详情缩略图
    async getimglist() {
      const { data: res } = await this.$http.get(
        `/api/getthumimages/${this.ImgID}`
      );
      this.imgslt = res.message;
      this.imgslt.forEach(item => {
        this.previewimg.push(item.src);
      }); //将拿到的图片地址追加到点击显示图片的数组中
    },
    // 点击预览图片
    getImg(images, index) {
      ImagePreview({
        images: this.previewimg,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    }
  },
  computed: {
    ImgID() {
      return this.$route.params.id;
    }
  },
  components: {
    comment: comment,
    [ImagePreview.Component.name]: ImagePreview.Component
  }
};
</script>
<style lang="less" scoped>
.ImgDetail {
  margin: 10px 10px 0 10px;
  color: #1989fa;
  border-bottom: 1px solid #ccc;
  h5 {
    text-align: center;
    font-size: 14px;
  }
  p {
    color: #8f8f94;
    line-height: 10px;
    font-size: 12px;
  }
  span {
    color: #8f8f94;
    float: right;
  }
}
.content {
  padding: 0 10px;
  color: #535353;
}
.img {
  width: 100%;
  text-align: center;
  /* overflow: hidden; */
  li {
    display: inline-block;
    /* float: left; */
    width: 26%;
    margin: 10px;
    box-shadow: 0 5px 5px #d1d1d1;
  }
  li img {
    width: 100%;
    vertical-align: middle;
  }
}
</style>
